<template>
	<view class="page flex-col">
		<view class="section flex-col">
			<view class="block flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<view class="block_4 flex-col">
					<view class="box_19 flex-col">
						<image style="width: 100%; height: 190rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1e07abc224aeb8cbdae711930db663c36bdf82f9.png"
							mode=""></image>
						<view class="list_1 ">
							<view class="list-items_1 flex-col" v-for="(item, index) in loopData0" :key="index">
								<!-- <view class="text-wrapper_6 flex-row justify-between" @click="onClick_5">
									<text class="text_38">{{item.lanhutext0}}</text>
									<text class="text_39">{{item.lanhutext1}}</text>
								</view>
								<text class="text_40">{{item.lanhutext2}}</text>
								<button v-if="item.slot5 === 5" class="button_5 flex-col" @click="onClick_s">
									<text class="text_41">立即领取&nbsp;&gt;</text>
								</button>
								<text v-if="item.slot1 === 1" class="text_42">{{item.specialSlot1.lanhutext0}}</text>
								<text v-if="item.slot3 === 3" class="text_44">已领完</text>
								<button v-if="item.slot4 === 4" class="button_6 flex-col" @click="onClick_6">
									<text class="text_41">立即领取&nbsp;&gt;</text>
								</button> -->
								<view class="text-wrapper_6 flex-row " @click="onClick_5(item)" v-if="item.type == 1">
									<text class="text_38">¥</text>
									<text class="text_39">{{item.jian}}</text>
								</view>
								<view class="text-wrapper_6 flex-row " @click="onClick_5(item)" v-if="item.type == 2">
									<text class="text_38">¥</text>
									<text class="text_39">{{item.jian}}</text>
								</view>
								<view class="text-wrapper_6 flex-row " @click="onClick_5(item)" v-if="item.type == 3">
									<text class="text_38"></text>
									<text class="text_39">{{item.jian}}折</text>
								</view>
								<!-- //type 代金券1 满减券2 折扣券3 -->
								<text class="text_40" v-if="item.type == 1"
									@click="onClick_5(item)">{{item.man}}元代金券</text>
								<text class="text_40" v-if="item.type == 2"
									@click="onClick_5(item)">{{item.man}}元满减券</text>
								<text class="text_40" v-if="item.type == 3"
									@click="onClick_5(item)">{{item.man}}元折扣券</text>
								<!-- <button class="button_5 flex-col" @click="onClick_s">
									<text class="text_41">立即领取&nbsp;&gt;</text>
								</button> -->
								<!-- <text  class="text_42">{{item.can_get_time}}</text> -->
								<!-- <text  class="text_43">12123</text> -->
								<button class="button_6 flex-col" @click="onClick_2(item,index)"
									v-if="item.else_stock>0">
									<text class="text_41">立即领取&nbsp;&gt;</text>
								</button>
								<text class="text_44" v-else>已领完</text>
								<!-- <button v-if="item.slot4 === 4" class="button_6 flex-col" @click="onClick_s">
									<text class="text_41">立即领取&nbsp;&gt;</text>
								</button> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 弹窗 -->
				<!-- // q_type 平台1 场馆2 新人3 -->
				<!-- //type 代金券1 满减券2 折扣券3 -->
				<u-popup @touchmove.stop :show="box_111" @close="box_111 == false" closeOnClickOverlay mode="center"
					safeAreaInsetTop round="15">
					<view class="box_111 flex-col" v-if="box_111">
						<view class="box_222">
							<view class="box_2 flex-row" :class="itemlist.q_type == 1 ? 'box_2' : 'box_2_2'">
								<!-- 平台 -->
								<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 1">
									<!-- 代金券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 1">
										<text class="text_1">¥</text>
										<text class="text_2">{{itemlist.jian}}</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
									<!-- 减券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 2">
										<text class="text_1">¥</text>
										<text class="text_2">{{itemlist.jian}}</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
									<!-- 折扣券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 3">
										<text class="text_1"></text>
										<text class="text_2">{{itemlist.jian}}折</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
								</view>
				
								<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 1">
									<text class="text_4">全场抵用券</text>
									<text class="text_5">{{itemlist.can_get_time}}</text>
								</view>
								<!-- 场馆 -->
								<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 2">
									<!-- 代金券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 1">
										<text class="text_1">¥</text>
										<text class="text_2">{{itemlist.jian}}</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
									<!-- 减券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 2">
										<text class="text_1">¥</text>
										<text class="text_2">{{itemlist.jian}}</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
									<!-- 折扣券 -->
									<view class="text-wrapper_1" v-if="itemlist.type == 3">
										<text class="text_1"></text>
										<text class="text_2">{{itemlist.jian}}折</text>
									</view>
									<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
								</view>
								<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 2">
									<text class="text_4">场馆抵用券</text>
									<text class="text_5">{{itemlist.can_get_time}}</text>
								</view>
								<!-- 新人 -->
								<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 3">
									<view class="text-wrapper_1">
										<text class="text_1">¥</text>
										<text class="text_2">10</text>
									</view>
									<text class="text_3">满100元减</text>
								</view>
								<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 3">
									<text class="text_4">新人抵用券</text>
									<text class="text_5">{{itemlist.can_get_time}}</text>
								</view>
								<image @click="box_open" class="icon_11" referrerpolicy="no-referrer"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/eb1eebfd593afbcce3c105098da1c48e231045d5.png" />
							</view>
							<image @click="box_close" class="icon_1" referrerpolicy="no-referrer"
								:class="itemlist.q_type == 1 ? 'icon_1' : 'icon_1_1'"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/dab4b52d01ac2d9220cd1547e7494656a517d6cf.png" />
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "新人专区",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 20,
				},
				totalPage: '', //几页
				loopData0: [],
				q_type: '',
				act_id: '',
				box_111: false,
				itemlist: {},
			};
		},
		onLoad(options) {
			this.q_type = options.q_type
			this.act_id = options.act_id
			this.getCoupon()
		},
		methods: {
			onClick_5(item) {
				uni.navigateTo({
					url: '/pages_a/coupon/coupon_details?id=' + item.id + '&act_id=' + this.act_id
				})
			},
			async getCoupon() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					q_type: this.q_type,
					act_id: this.act_id,
					open_id: uni.getStorageSync('openid'),
				}
				let res = await market.getCoupon(postData);
				if (res.code == 1) {
					this.loopData0 = res.data.result.data
				}
			},
			onClick_2(item, index) {
				this.itemlist = item
				let datas = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					coupon_id: item.id,
					open_id: uni.getStorageSync('openid'),
				};
				market.insertCouponRecord(datas).then(result => {
					if (result.code == 1) {
						this.box_111 = true
					} else {
						uni.showToast({
							title: result.info,
							icon: 'exception',
							duration: 850
						});
					}
				})
			},
			box_close() {
				this.box_111 = false
			},
			box_open() {
				uni.navigateTo({
					url: '/pages/venues/index'
				})
			},
		}
	};
</script>
<style lang='scss' scoped>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.section {
			/* background-color: rgba(255, 255, 255, 1); */
			height: 1625rpx;
			width: 750rpx;

			.block {
				position: relative;
				width: 750rpx;
				height: 1625rpx;
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/18c99a6c80a59eddb278e162fd650ba215c54c95.png') 100% no-repeat;
				background-size: 750rpx 2240rpx;

				.box_111 {
					/* background-color: rgba(0, 0, 0, 0.6);
					width: 750rpx;
					height: 100%;
					position: absolute;
					z-index: 999; */
				
				
					.box_222 {
						width: 100%;
						height: 100vh;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}
				
					.icon_1 {
						width: 70rpx;
						height: 70rpx;
						margin-top: 20rpx;
						/* position: absolute;
						left: 47%;
						top: 69vh; */
					}
				
					.box_2 {
						width: 558rpx;
						height: 616rpx;
						background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ebf35f2fa3b35224f9fbfe7de42abd3e11c5fff7.png') 100% no-repeat;
						background-size: 100% 100%;
						/* position: absolute;
						left: 14%; */
						/* top: 28vh; */
					}
				
					.icon_1_1 {
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						/* left: 47%; */
						top: 75vh;
					}
				
					.box_2_2 {
						width: 558rpx;
						height: 616rpx;
						background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ebf35f2fa3b35224f9fbfe7de42abd3e11c5fff7.png') 100% no-repeat;
						background-size: 100% 100%;
						position: absolute;
						/* left: 15%;
						top: 70vh; */
					}
				
					.text-group_1 {
						width: 100rpx;
						height: 97rpx;
						margin: 267rpx 0 0 50rpx;
				
						.text-wrapper_1 {
							width: 100rpx;
							height: 59rpx;
							overflow-wrap: break-word;
							font-size: 0;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: center;
							white-space: nowrap;
							line-height: 35rpx;
				
							.text_1 {
								width: 100rpx;
								height: 59rpx;
								overflow-wrap: break-word;
								color: rgba(241, 16, 49, 1);
								font-size: 35rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 35rpx;
							}
				
							.text_2 {
								width: 100rpx;
								height: 59rpx;
								overflow-wrap: break-word;
								color: rgba(241, 16, 49, 1);
								font-size: 40rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 80rpx;
							}
						}
				
						.text_3 {
							width: 92rpx;
							height: 19rpx;
							overflow-wrap: break-word;
							color: rgba(203, 155, 105, 1);
							font-size: 20rpx;
							font-family: SourceHanSansSC-Normal;
							font-weight: NaN;
							text-align: center;
							white-space: nowrap;
							line-height: 20rpx;
							margin: 30rpx 0 0 8rpx;
						}
					}
				
					.text-group_2 {
						width: 224rpx;
						height: 60rpx;
						margin: 283rpx 102rpx 0 90rpx;
				
						.text_4 {
							width: 152rpx;
							height: 29rpx;
							overflow-wrap: break-word;
							color: rgba(163, 98, 32, 1);
							font-size: 30rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: center;
							white-space: nowrap;
							line-height: 30rpx;
							margin-left: 30rpx;
						}
				
						.text_5 {
							width: 224rpx;
							height: 16rpx;
							overflow-wrap: break-word;
							color: rgba(203, 155, 105, 1);
							font-size: 20rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: center;
							white-space: nowrap;
							line-height: 20rpx;
							margin-top: 15rpx;
						}
					}
				
					.icon_11 {
						position: absolute;
						z-index: 99;
						width: 280rpx;
						height: 70rpx;
						margin: 490rpx 0 45rpx 128rpx;
					}
				
				
				}

				.block_4 {
					box-shadow: 8px 14px 13px 0px rgba(0, 0, 0, 0.13);
					background-color: #FFEEDD;
					border-radius: 29px;
					height: 1399rpx;
					width: 690rpx;
					position: absolute;
					left: 30rpx;
					top: 197rpx;

					.box_19 {
						/* box-shadow: 8px 14px 13px 0px rgba(0, 0, 0, 0.13);
						background-color: rgba(255, 238, 221, 1);
						border-radius: 29px;
						position: absolute;
						left: 30rpx;
						top: 795rpx;
						width: 690rpx;
						height: 399rpx; */

						.image-wrapper_1 {
							width: 627rpx;
							height: 38rpx;
							margin: 35rpx 0 0 30rpx;

							.image_14 {
								width: 274rpx;
								height: 38rpx;
							}

							.image_15 {
								width: 77rpx;
								height: 38rpx;
							}
						}

						.list_1 {
							width: 631rpx;
							height: 246rpx;
							justify-content: space-between;
							margin: 0rpx 0 40rpx 20rpx;

							.list-items_1 {
								width: 191rpx;
								height: 246rpx;
								background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fccbd32abfd8778e3325c01b131cbbae133685ad.png') 100% no-repeat;
								background-size: 100% 100%;
								float: left;
								margin-left: 20rpx;
								margin-top: 30rpx;

								.text-wrapper_6 {
									width: 107rpx;
									height: 68rpx;
									margin: 38rpx 0 0 38rpx;

									.text_38 {
										width: 18rpx;
										height: 26rpx;
										overflow-wrap: break-word;
										color: #D62222;
										font-size: 33rpx;
										font-family: SourceHanSansCN-Regular;
										font-weight: 600;
										text-align: left;
										white-space: nowrap;
										line-height: 33rpx;
										margin-top: 30rpx;
									}

									.text_39 {
										width: 87rpx;
										height: 68rpx;
										overflow-wrap: break-word;
										color: #D62222;
										font-size: 44rpx;
										font-family: SourceHanSansCN-Bold;
										font-weight: 700;
										text-align: left;
										white-space: nowrap;
										line-height: 85rpx;
									}
								}

								.text_40 {
									width: 112rpx;
									height: 21rpx;
									overflow-wrap: break-word;
									color: #D62222;
									font-size: 20rpx;
									font-family: PingFang-SC-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 20rpx;
									margin: 20rpx 0 0 42rpx;
								}

								.button_5 {
									height: 36rpx;
									background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1409a59cd5bea061e0ed3e3bee078e2994d90821.png') -1rpx 0rpx no-repeat;
									background-size: 130rpx 36rpx;
									width: 129rpx;
									margin: 51rpx 0 18rpx 33rpx;

									.text_41 {
										width: 101rpx;
										height: 21rpx;
										overflow-wrap: break-word;
										color: rgba(206, 46, 25, 1);
										font-size: 22rpx;
										font-family: PingFang-SC-Medium;
										font-weight: 500;
										text-align: left;
										white-space: nowrap;
										line-height: 22rpx;
										margin: 8rpx 0 0 18rpx;
									}
								}

								.text_42 {
									width: 89rpx;
									height: 17rpx;
									overflow-wrap: break-word;
									color: #D62222;
									font-size: 20rpx;
									font-family: PingFang-SC-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 20rpx;
									margin: 6rpx 0 0 54rpx;
								}

								.text_43 {
									text-shadow: 0px 1px 1px rgba(255, 110, 84, 1);
									width: 165rpx;
									height: 2rpx;
									overflow-wrap: break-word;
									color: rgba(155, 36, 21, 1);
									font-size: 14rpx;
									font-family: SourceHanSansCN-Normal;
									font-weight: NaN;
									text-align: left;
									white-space: nowrap;
									line-height: 14rpx;
									margin: 12rpx 0 0 11rpx;
								}

								.text_44 {
									width: 61rpx;
									height: 21rpx;
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 1);
									font-size: 22rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 22rpx;
									margin: 27rpx 0 24rpx 65rpx;
								}

								.button_6 {
									width: 130rpx;
									height: 36rpx;
									margin: 45rpx 0 18rpx 33rpx;
									background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1409a59cd5bea061e0ed3e3bee078e2994d90821.png') -1rpx 0rpx no-repeat;
									background-size: 130rpx 36rpx;

									.text_41 {
										width: 101rpx;
										height: 21rpx;
										overflow-wrap: break-word;
										color: rgba(206, 46, 25, 1);
										font-size: 22rpx;
										font-family: PingFang-SC-Medium;
										font-weight: 500;
										text-align: left;
										white-space: nowrap;
										line-height: 22rpx;
										margin: 8rpx 0 0 18rpx;
									}
								}
							}
						}
					}

				}
			}
		}


	}
</style>